<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>产品套餐配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css" media="all">
</head>
<style>
    .layui-upload-img {
        width: 100px;
    !important;
    }

    .addPackage {
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 1px solid #666;
        line-height: 40px;
        border-radius: 40px;
        text-align: center;
        cursor: pointer;
    }

    #right {
        width: 200px;
        height: 300px;
        border: 1px solid #777;
        overflow-y: scroll;
    }

    .btns span {
        margin: 5px 10px;
    }

    .shi {
        text-align: center;
        font-size: 16px;
        margin: 10px 0;
    }

    .activity {
        background: #1E9FFF;
        color: white;
    }

    .tabs {
        /*border: 1px solid #868686;*/
        padding: 5px 40px;
    }
</style>
<body>
<div style="margin-top: 20px;">
</div>
<form class="layui-form" id="admin">
    <input type="hidden" id="product_id" value="{$id}">
    <div>
        {volist name="package" id="vo"}
        <div class="layui-form-item packageChild">
            <label class="layui-form-label">套餐名称</label>
            <div class="layui-input-inline" style="width: 500px">
                <input type="hidden" name="package_id" id="package_id" value="{$vo.id}">
                <div class="layui-input-inline" style="width: 400px;padding-bottom: 15px">
                    <input name="package_name" value="{$vo.name}"  placeholder="套餐名称" autocomplete="off" class="layui-input" type="text" lay-key="1">
                </div>
            </div>
            <span class="layui-btn  layui-btn-sm addSpecs" style="margin-top: 4px">新增</span>
            <span class="layui-btn layui-btn-danger layui-btn-sm delPackage" data-id='{$vo.id}' style="margin-top: 4px">删除<i class="layui-icon"></i></span>
            <div class="layui-form-item childs">
                <label class="layui-form-label">&nbsp;</label>
                <div class="layui-input-inline" style="width: 650px">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>{$table_name[0]}</th>
                            <th>{$table_name[1]}</th>
                            <th>{$table_name[2]}</th>
                            <th>{$table_name[3]}</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody class="specsChild">
                        {volist name="vo['specs'][0]" id="vo1"}
                        <tr>
                            <td>
                                <input type="hidden" name="specs_id" id="specs_id" value="{$vo1.id}">
                                <input name="specs_name" value="{$vo1.name}" placeholder="{$table_name[0]}" autocomplete="off" class="layui-input layui-col-xs5" type="text" lay-key="2">
                            </td>
                            <td>
                                <input name="specs_num" value="{$vo1.num}" placeholder="{$table_name[1]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2">
                            </td>
                            <td>
                                <input name="minorder_num" value="{$vo1.minorder_num}" placeholder="{$table_name[2]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2">
                            </td>
                            <td>
                                <input name="inc_order_num" value="{$vo1.inc_order_num}" placeholder="{$table_name[3]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2">
                            </td>
                            <td>
                                <span class="layui-btn layui-btn-danger layui-btn-sm delSpecs" data-id="{$vo1.id}" style="margin-top: 4px"><i class="layui-icon"></i></span>
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {/volist}

        <div class="layui-form-item " style="text-align: center">
            <span class="addPackage" id="addPackage">
                <i class="layui-icon" style="font-size: 30px">&#xe654;</i>
            </span>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>

<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;

        //提交表单
        form.on('submit(admin)', function(data) {
            var id = $("#product_id").val(); //产品ID
            var data = [];
            var packageChild = $(".packageChild");
            for(var i = 0; i < packageChild.length; i++) {
                var datas = {};
                var datal = [];

                var specsChild = $(packageChild[i]).find(".specsChild tr");
                for(var k = 0; k < specsChild.length; k++) {
                    var datass = {};
                    var specs_id = $(specsChild[k]).find("input[name=specs_id]").val();
                    if(specs_id) {
                        datass.specs_id = specs_id;
                    }
                    datass.specs_name = $(specsChild[k]).find("input[name=specs_name]").val();
                    datass.specs_num = $(specsChild[k]).find("input[name=specs_num]").val();
                    datass.minorder_num = $(specsChild[k]).find("input[name=minorder_num]").val();
                    datass.inc_order_num = $(specsChild[k]).find("input[name=inc_order_num]").val();
                    datal.push(datass);

                }
                datas.package_name = $(packageChild[i]).find("input[name=package_name]").val();
                var package_id = $(packageChild[i]).find("input[name=package_id]").val();
                if(package_id) {
                    datas.package_id = package_id;
                }
                datas.specsdata = datal;

                data.push(datas);
            }
            $.ajax({
                url: "{:url('admin/product/addPackage')}",
                data: {
                    id: id,
                    data: data
                },
                type: 'post',
                async: false,
                success: function(res) {
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function() {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        }, 1500)
                    }
                }
            });
            return false;
        })
    });
</script>

<script>
    $("#addPackage").on("click", function() {
        var html = '    <div class="layui-form-item packageChild" >\n' +
            '      		<label class="layui-form-label">套餐名称</label>\n' +
            '      		<div class="layui-input-inline" style="width: 500px">\n' +
            '        		<div class="layui-input-inline" style="width: 400px;padding-bottom: 15px">\n' +
            '          			<input name="package_name" value=""  placeholder="套餐名称" autocomplete="off" class="layui-input" type="text" lay-key="1">\n' +
            '        		</div>\n' +
            '          </div>\n' +
            '      		<span  class="layui-btn  layui-btn-sm addSpecs" style="margin-top: 4px;float: left">新增</span>\n' +
            '      		<span  class="layui-btn layui-btn-danger layui-btn-sm delPackage" style="margin-top: 4px;float: left">删除<i class="layui-icon"></i></span>\n' +
            '<div class="layui-form-item childs">'+
            '<label class="layui-form-label">&nbsp;</label>'+
            '<div class="layui-input-inline" style="width: 650px">'+
            '<table class="layui-table">'+
            '<thead><tr><th>{$table_name[0]}</th><th>{$table_name[1]}</th><th>{$table_name[2]}</th><th>{$table_name[3]}</th><th>操作</th></tr></thead>'+
            '<tbody class="specsChild"></tbody>'+
            '</table>'+
            '</div>'+
            '</div>'+
            '</div>';

        $("#addPackage").parent().before(html);
    });

    $(document).on("click", ".delPackage", function() {
        var that = this;
        var id = $(that).attr("data-id");
        if(id=='' || id==undefined){
            var child = $(that).parent(".packageChild");
            child.remove();
        }else{
            $.post("/admin/product/delPackage",{id:id},function(data){
                if(data.code==200){
                    var child = $(that).parent();
                    child.remove();
                    layer.msg("删除成功");
                }else{
                    layer.msg("删除失败");
                }
            },'json')
        }
    });

    $(document).on("click", ".delSpecs", function() {
        var that = this;
        var id = $(that).attr("data-id");
        if(id=='' || id==undefined){
            var child = $(that).parent().parent();
            child.remove();
        }else{
            $.post("/admin/product/delSpecs",{id:id},function(data){
                if(data.code==200){
                    var child = $(that).parent().parent();
                    child.remove();
                    layer.msg("删除成功");
                }else{
                    layer.msg("删除失败");
                }
            },'json')
        }
    });

    $(document).on("click", ".addSpecs", function() {
        var html = '' +
            ' <tr>\n' +
            '   <td><input name="specs_name" value="" placeholder="{$table_name[0]}" autocomplete="off" class="layui-input" type="text" lay-key="2"></td>\n' +
            '   <td><input name="specs_num" value="" placeholder="{$table_name[1]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2"></td>\n' +
            '   <td><input name="minorder_num" value="" placeholder="{$table_name[2]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2"></td>\n' +
            '   <td><input name="inc_order_num" value="" placeholder="{$table_name[3]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2"></td>\n' +
            '   <td><span class="layui-btn layui-btn-danger layui-btn-sm delSpecs" style="margin-top: 4px"><i class="layui-icon"></i></span></td>\n' +
            '</tr>';
        $(this).siblings('.childs').find('.specsChild').append(html);
    })
</script>
</body>

</html>